<template>
	<u-popup :value="value" @close="$emit('input',false)" mode="bottom" :safe-area-inset-bottom="true"
		:border-radius="30" height="50%">
		<scroll-view scroll-y="true" style="height: 100%;padding-top: 100rpx;position: relative;box-sizing: border-box;"
			@scrolltolower="reachBottom">
			<view class="list-title">
				选择网点
			</view>
			<view class="list-item" v-for="item in dataList" :key="item.id" :class="{'active':item.id==currData.id}"
				@tap="checkedData(item)">
				<text>{{item.name}}</text>
				<u-icon v-if="currData.id == item.id" name="checkmark-circle-fill"></u-icon>
			</view>
			<loading-footer class="mt30" :status="status"></loading-footer>
		</scroll-view>
	</u-popup>
</template>

<script>
	import {
		loadingFun
	} from "../../../utils/tools";
	import {
		loadingType
	} from "@/utils/type";
	export default {
		data() {
			return {
				page: 1,
				status: loadingType.LOADING,
				dataList: [],
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			loadFunc: {
				type: Function
			},
			currData: {
				type: Object
			}
		},
		created() {
			this.getDataList(({
				dataList
			}) => {
				this.$emit('changeCurrData', dataList[0])
			});
		},
		methods: {
			async getDataList(callback = null) {
				const data = await loadingFun(this.loadFunc, this.page, this.dataList, this.status)
				if (data) {
					this.dataList = data.dataList;
					this.status = data.status;
					this.page = data.page;
					if (callback) callback(data);
				}
			},
			checkedData(data) {
				if (data.id != this.currData.id)
					this.$emit('changeCurrData', data)
				this.$emit('input', false)
			},

			reachBottom() {
				this.getDataList();
			}
		}
	}
</script>

<style lang="scss">
	.list-title {
		position: fixed;
		top: 0;
		z-index: 20;
		text-align: center;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: white;
		border-bottom: 2rpx solid var(--primary-color);
	}

	.list-item {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 20rpx;

		&:not(:last-of-type) {
			border-bottom: 2rpx solid #eee;
		}

		&.active {
			color: var(--primary-color)
		}
	}
</style>